<template>
  <div class="out">
    <div class="inner">
      <div class="img">
        <img src="@/assets/images/轮播图1.jpg" alt="" />
      </div>
      <div class="img">
        <img src="@/assets/images/轮播图2.jpg" alt="" />
      </div>
      <div class="img">
        <img src="@/assets/images/轮播图3.jpg" alt="" />
      </div>
      <div class="img">
        <img src="@/assets/images/轮播图4.jpg" alt="" />
      </div>
      <div class="img">
        <img src="@/assets/images/轮播图2.jpg" alt="" />
      </div>
      <div class="img">
        <img src="@/assets/images/轮播图3.jpg" alt="" />
      </div>
      <div class="img">
        <img src="@/assets/images/轮播图4.jpg" alt="" />
      </div>
    </div>
    <div class="arrow">
      <i class="left">《</i>
      <i class="right">》</i>
    </div>
    <div class="button">
      <p />
      <p />
      <p />
      <p />
      <p />
      <p />
      <p />
    </div>
  </div>
</template>
<script setup lang="ts">
window.onload = () => {
  var img = document.querySelectorAll(".img"); //获取文档中img元素
  var left = document.querySelector(".left"); //查询单个元素
  var right = document.querySelector(".right");
  var buttons = document.querySelectorAll("p");

  //设置一个数组，用来存id
  const idArr = ["first", "second", "right", "left", "left", "left", "last"];

  //设置一个变量用来当图片的索引
  var index = 0;

  initialize();

  //设置一个定时器，让图片轮播
  var timer = setInterval(next, 3000);

  //给箭头绑定点击事件  (将监听到的事件添加到left上)
  left?.addEventListener("click", prev);
  //当鼠标放到箭头上时，让定时器停止
  left?.addEventListener("mouseover", () => {
    clearInterval(timer);
    timer = 0;
  });
  //当鼠标离开箭头时，让定时器重新开始
  left?.addEventListener("mouseout", () => {
    timer = setInterval(next, 3000);
  });

  right?.addEventListener("click", next);
  right?.addEventListener("mouseover", () => {
    clearInterval(timer);
    timer = 0;
  });
  right?.addEventListener("mouseout", () => {
    timer = setInterval(next, 3000);
  });

  //给小方块添加点击事件
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("mousedown", () => {
      //在用户点击的时候关闭定时器
      clearInterval(timer);
      timer = 0;
      //这里需要判断用户点击的小方块与当前图片的索引之差，如果
      //大于0，则表明用户需要更换的是后面的图片，反之，表明用户
      //需要更换之前也就是前面的图片
      if (index > i) {
        let x = index - i;
        while (x--) {
          prev();
        }
      } else if (index < i) {
        let x = i - index;
        while (x--) {
          next();
        }
      }
    });
    buttons[i].addEventListener("mousedown", () => {
      timer = setInterval(next, 3000);
      //让图片继续动起来
    });
  }

  //创建切换图片的函数
  function prev() {
    //切换上一张也就是让数组的最后一个元素变成第一个元素
    idArr.push(idArr.shift());
    initialize();
    if (index === 0) {
      index = buttons.length - 1;
    } else {
      index--;
    }
    clearColor();
  }
  function next() {
    //跟上面反过来
    idArr.unshift(idArr.pop());
    initialize();
    if (index === buttons.length - 1) {
      index = 0;
    } else {
      index++;
    }
    clearColor();
  }

  //创建一个函数用来让小方块跟随图片运动
  function clearColor() {
    for (let i = 0; i < buttons.length; i++) {
      buttons[i].style.backgroundColor = "silver";
    }
    //让当前的索引变色
    buttons[index].style.backgroundColor = "rgb(20, 134, 187)";
  }

  //创建一个函数用来初始化图片
  function initialize() {
    for (let i = 0; i < img.length; i++) {
      img[i].id = idArr[i];
    }
  }
};
</script>

<style lang="scss" scoped>
.out {
  width: 100%;
  height: 500px;
  background-color: #fff;
  //   margin: 0 auto;

  .inner {
    position: relative;
    width: 100%;
    height: 100%;

    .img {
      width: 800px;
      height: 350px;
      position: absolute; //绝对定位
      transition: 0.3s;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.out .inner .img .out .arrow {
  font-size: 32px;
}
.out .arrow i {
  position: absolute;
  color: #ed3333;
  z-index: 9999;
  cursor: pointer; //鼠标经过或点击有小手样式
  top: 100px;
}
.out .arrow .left {
  left: 0;
}
.out .arrow .right {
  left: 1170px;
}
.out .button {
  //   width: 175px;
  //   height: 15px;
  position: absolute;
  z-index: 99;
  left: 50%;
  top: 350px;
  transform: translateX(-50%);
}
.out .button p {
  width: 15px;
  height: 15px;
  float: left;
  margin: 0 5px;
  cursor: pointer;
  background-color: silver;
}
// .out .button p:first-child {
//   background-color: #fc5f27;
// }
.inner #last {
  transform: translateX(0);
  z-index: 9;
  opacity: 1; //元素透明度，1完全不透明
}
.out #first {
  transform: translateX(200px) scale(1.1); //translateX右边移200 scale元素缩放
  z-index: 99;
  opacity: 1;
}
.out #second {
  transform: translateX(400px);
  z-index: 9;
  opacity: 1;
}
.out #left {
  transform: translateX(-100px);
  z-index: 1;
  opacity: 0;
}
.out #right {
  transform: translateX(500px);
  z-index: 1;
  opacity: 0;
}
</style>
